<!DOCTYPE html>
<html>
  <head>
    <% include ../../commonHead.html %>
    <title>双12抢购</title>
    <style>
        img {
            display: block;
            width: 16rem;
        }
        .timerWrap {
            position: relative;
            width: 16rem;
            height: 10.66666667rem;
            background: url("/image/activity/athletic_2.jpg") no-repeat;
            background-size: 16rem 10.66666667rem;
            overflow: hidden;
        }
        .timerWrap .inner {
            width: 16rem;
            text-align: center;
            font-size: 0.55466667rem;
            color: #ffffff;
            font-weight: bold;
            margin-top: 0.512rem;
        }
        .timerWrap .inner span {
            margin-left: 0.08533333rem;
            background: #ffffff;
            color: #000000;
            font-size: 0.59733333rem;
            font-family: "微软雅黑";
        }
        .timerWrap .money {
            position: absolute;
            height: 0.768rem;
            text-align: center;
            line-height: 0.768rem;
            font-size: 0.768rem;
            color: #de5b45;
        }
        .timerWrap .money01 {
            top: 4.56533333rem;
            left: 4.864rem;
            width: 2.13333333rem;
        }
        .timerWrap .money02 {
            top: 4.56533333rem;
            left: 10.79466667rem;
            width: 1.70666667rem;
        }
        .timerWrap .money03 {
            top: 5.888rem;
            left: 4.864rem;
            width: 2.13333333rem;
        }
        .timerWrap .money04 {
            top: 5.888rem;
            left: 10.79466667rem;
            width: 1.70666667rem;
        }

    </style>
    <script>
      (function(){
        //获取宽
        var width = document.documentElement.clientWidth;
        // 创建新style
        var styleN = document.createElement('style');
        styleN.innerHTML = 'html{font-size:' + (width/16) +'px !important}';
        document.head.appendChild(styleN);
        })();
    </script>
  </head>
  <body>
    <div id="app">
      <ul class="content">
        <li>
          <img src="/image/activity/athletic_1.jpg" alt="">
        </li>
        <li class="timerWrap" >
        <counter-down></counter-down>
         <bonus-tip></bonus-tip>
        </li>
          <img src="/image/activity/athletic_3.jpg" alt="">
        </li>
        <li>
          <img src="/image/activity/athletic_4.png" alt="">
        </li>
      </ul>
      </div>


          <!-- 倒计时组件 -->
  <script type="text/x-template" id="counter-down-template">
    <div class="inner">
      <p>{{timer}}</p>
    </div>

  </script>
  <!--  奖励提示组件-->
  <script type="text/x-template" id="bonus-tip-template">
    <div>
      <div class="money01 money">{{sale_fee}}</div>
      <div class="money02 money">{{bonus.get1}}</div>
      <div class="money03 money">{{bonus.next}}</div>
      <div class="money04 money">{{bonus.get2}}</div>
    </div>
  </script>
  <!--  -->
  <script src="https://unpkg.com/vue"></script>
  <script type="text/javascript">
  Vue.config.devtools = true;
  // 注册
  Vue.component('counter-down', {
    // 声明 props
    // props: ['endTime'],
    // v-bind:endTime="'2017-12-20 23:59:59'"
    data:function(){
      return {
         timer : '',
         flag : false,
         endTime:'2017-12-20 23:59:59'
      };
    },

    template: '#counter-down-template',
    methods:{
      timeDown:function(){
        var nowTime = new Date();
        var endTime = new Date(this.endTime)
        var leftTime = parseInt((endTime.getTime() - nowTime.getTime())/1000)
        var d = this.formate(parseInt(leftTime/(24*60*60)))
        var h = this.formate(parseInt(leftTime/(60*60)%24))
        var m = this.formate(parseInt(leftTime/60%60))
        var s = this.formate(parseInt(leftTime%60))
        if(leftTime <= 0){
           this.flag = true
           this.$emit('time-end')
        }
        this.timer = '距离活动结束还剩:' + d + '天' + h + '小时' + m + '分' + s + '秒';
      },
      formate:function(time) {
         if(time>=10){
             return time;
         }else{
             return '0' + time;
         }
      }
    },
    mounted:function(){
      if(this.flag == true){
       clearInterval(time)
      }
      var time = setInterval(()=> {
       this.timeDown();
      },1000);
    }
  });

  // 注册
  Vue.component('bonus-tip', {
    // 声明 props
    // props: ['bonus'],
    data:function(){
      return{
        sale_fee : '<%= jsonData.sale_fee %>',
        bonus:{
          sale_fee:'<%= jsonData.sale_fee %>',
          get1:'-',
          next:'-',
          get2:'-'
        }
      };
    },
    template: '#bonus-tip-template',
    methods:{
      countBonus:function(){
        var val = Math.floor(this.sale_fee / 50);
        // this.bonus.sale_fee = this.sale_fee; //当前消费
        if(val ==0 ){ // 0-49
          this.bonus.get1 = 0;
          this.bonus.next = (50-this.sale_fee).toFixed(2);
          this.bonus.get2 = 5;
        }else if(val<2){//50-99
          this.bonus.get1 = 5;
          this.bonus.next = (100-this.sale_fee).toFixed(2);
          this.bonus.get2 = 15;
        }else if(val<6){//100-299
          this.bonus.get1 = 15;
          this.bonus.next = (300-this.sale_fee).toFixed(2);  // .toFixed(2)
          this.bonus.get2 = 60;
        }else{//300-----
          this.bonus.get1 = 60;
        }
        console.log('bonus:',this.bonus);
      }
    },
    mounted:function(){
      this.countBonus();
    }
});

  var app = new Vue({
    el: '#app',
    data:function(){
      return {
        sale_fee: '<%= jsonData.sale_fee %>'
      };
    },
    methods:{

    },
    mounted:function(){

    }
  });

</script>
  </body>
</html>
